package com.dev.module_ui_composable.components

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ScrollableTabRow
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableIntState
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.dev.module_ui_composable.theme.CategoryIndicatorBrush
import com.dev.module_ui_composable.theme.TabIndicatorColor
import kotlinx.coroutines.launch

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CustomTabLayout(
    tabs: List<String>,
    pagerState: PagerState,
    selectedTabIndex: MutableIntState,
    modifier: Modifier = Modifier,
    textColor: Color = Color.Black,
    containerColor: Color = Color.White
) {
    val scope = rememberCoroutineScope()

    // Tab的高度为48.dp，实际情况再调整
    val tabHeight = 48.dp
    val tabIndicatorHeight = 5.dp // 指示器的高度

    ScrollableTabRow(
        selectedTabIndex = selectedTabIndex.intValue,
        modifier = modifier.height(tabHeight),
        containerColor = containerColor,
        edgePadding = 8.dp,
        indicator = { tabPositions ->
            if (tabPositions.isNotEmpty()) {
                val tabPosition = tabPositions[selectedTabIndex.intValue]
                // 指示器的长度
                val indicatorWidth = 30.dp
                Canvas(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(tabIndicatorHeight)
                        .padding(top = tabHeight - tabIndicatorHeight)
                ) {
                    // 绘制圆角短横条
                    drawRoundRect(
                        color = TabIndicatorColor,
                        topLeft = Offset(
                            x = tabPosition.left.toPx() + (tabPosition.width.toPx() - indicatorWidth.toPx()) / 2,
                            y = 0f
                        ),
                        size = Size(indicatorWidth.toPx(), tabIndicatorHeight.toPx()),
                        cornerRadius = CornerRadius(
                            x = tabIndicatorHeight.toPx() / 2,
                            y = tabIndicatorHeight.toPx() / 2
                        )
                    )
                }
            }
        }
    ) {
        tabs.forEachIndexed { index, title ->
            Tab(
                selected = index == selectedTabIndex.intValue,
                onClick = {
                    selectedTabIndex.intValue = index
                    scope.launch {
                        pagerState.scrollToPage(index)
                    }
                },
                selectedContentColor = Color.Transparent,
                unselectedContentColor = Color.Transparent,
                text = {
                    Text(
                        text = title,
                        modifier = Modifier.padding(vertical = 8.dp),
                        fontSize = 16.sp,
                        color = if (index == selectedTabIndex.intValue) textColor else Color.Gray
                    )
                }
            )
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CustomTabLayoutNoFirst(
    firstText: String,
    tabs: List<String>,
    pagerState: PagerState,
    selectedTabIndex: MutableIntState,
    modifier: Modifier = Modifier,
    textColor: Color = Color.Black,
    containerColor: Color = Color.White
) {
    val scope = rememberCoroutineScope()

    // Tab的高度为48.dp，实际情况再调整
    val tabHeight = 48.dp
    val tabIndicatorHeight = 5.dp // 指示器的高度

    ScrollableTabRow(
        selectedTabIndex = selectedTabIndex.intValue,
        modifier = modifier.height(tabHeight),
        containerColor = containerColor,
        edgePadding = 15.dp,
        indicator = { tabPositions ->
            if (tabPositions.isNotEmpty()) {
                val tabPosition = tabPositions[selectedTabIndex.intValue]
                // 指示器的长度
                val indicatorWidth = 30.dp
                Canvas(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(tabIndicatorHeight)
                        .padding(top = tabHeight - tabIndicatorHeight)
                ) {
                    // 绘制圆角短横条
                    drawRoundRect(
                        color = TabIndicatorColor,
                        topLeft = Offset(
                            x = tabPosition.left.toPx() + (tabPosition.width.toPx() - indicatorWidth.toPx()) / 2,
                            y = 0f
                        ),
                        size = Size(indicatorWidth.toPx(), tabIndicatorHeight.toPx()),
                        cornerRadius = CornerRadius(
                            x = tabIndicatorHeight.toPx() / 2,
                            y = tabIndicatorHeight.toPx() / 2
                        )
                    )
                }
            }
        }
    ) {
        Tab(
            selected = 0 == selectedTabIndex.intValue,
            onClick = {
                selectedTabIndex.intValue = 0
                scope.launch {
                    pagerState.scrollToPage(0)
                }
            },
            selectedContentColor = Color.Transparent,
            unselectedContentColor = Color.Transparent,
            text = {
                Text(
                    text = firstText,
                    modifier = Modifier.padding(vertical = 8.dp),
                    fontSize = 16.sp,
                    color = if (0 == selectedTabIndex.intValue) textColor else Color.Gray
                )
            }
        )
        tabs.forEachIndexed { index, title ->
            val tabIndex = index + 1
            Tab(
                selected = tabIndex == selectedTabIndex.intValue,
                onClick = {
                    selectedTabIndex.intValue = tabIndex
                    scope.launch {
                        pagerState.scrollToPage(tabIndex)
                    }
                },
                selectedContentColor = Color.Transparent,
                unselectedContentColor = Color.Transparent,
                text = {
                    Text(
                        text = title,
                        modifier = Modifier.padding(vertical = 8.dp),
                        fontSize = 16.sp,
                        color = if (tabIndex == selectedTabIndex.intValue) textColor else Color.Gray
                    )
                }
            )
        }
    }
}

@Composable
fun VerticalCustomTabLayout(
    tabs: List<String>,
    selectedTabIndex: MutableState<Int>,
    modifier: Modifier = Modifier,
    textColor: Color = Color.Black,
    containerColor: Color = Color.White
) {
    val scrollState = rememberScrollState()
    val tabHeight = 48.dp
    val tabIndicatorWidth = 5.dp // 指示器的宽度
    val tabIndicatorHeight = 30.dp // 指示器的高度
    val indicatorBrush = Brush.horizontalGradient(CategoryIndicatorBrush)

    Column(
        modifier = modifier
            .fillMaxHeight()
            .verticalScroll(scrollState)
            .background(color = containerColor),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        tabs.forEachIndexed { index, title ->
            Row(
                modifier = Modifier.height(70.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                if (index == selectedTabIndex.value) {
                    Canvas(
                        modifier = Modifier
                            .width(tabIndicatorWidth)
                            .height(tabHeight)
                            .padding(top = (tabHeight - tabIndicatorHeight) / 2)
                    ) {
                        drawRoundRect(
                            brush = indicatorBrush,
                            size = Size(tabIndicatorWidth.toPx(), tabIndicatorHeight.toPx()),
                            cornerRadius = CornerRadius(tabIndicatorWidth.toPx() / 2)
                        )
                    }
                } else {
                    Spacer(modifier = Modifier.width(tabIndicatorWidth))
                }

                Text(
                    text = title,
                    modifier = Modifier
                        .padding(8.dp)
                        .clickable { selectedTabIndex.value = index },
                    fontSize = 18.sp,
                    color = if (index == selectedTabIndex.value) textColor else Color.Gray
                )
            }
        }
    }
}
